<template>
  <div class="main-box">
    <div class="info-form-box">
      <div class="head-box">信息录入</div>
      <div class="emp-info-title">员工信息</div>
      <input
        class="emp-info-input"
        type="text"
        placeholder="请输入员工信息"
        v-model="empInfo"
      />
      <div class="emp-info">参加项目</div>
      <el-select v-model="projectName" placeholder="请选择参加的项目">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="emp-info">项目阶段</div>
      <div class="tag-box">
        <el-tag :type="type === 1 ? 'success' : 'info'" @click="selectStep(1)"
          >售前调研</el-tag
        >
        <el-tag :type="type === 2 ? 'success' : 'info'" @click="selectStep(2)"
          >电气实施</el-tag
        >
        <el-tag :type="type === 3 ? 'success' : 'info'" @click="selectStep(3)"
          >产品设计</el-tag
        >
        <el-tag :type="type === 4 ? 'success' : 'info'" @click="selectStep(4)"
          >研发</el-tag
        >
        <el-tag :type="type === 5 ? 'success' : 'info'" @click="selectStep(5)"
          >联调</el-tag
        >
        <el-tag :type="type === 6 ? 'success' : 'info'" @click="selectStep(6)"
          >等待验收</el-tag
        >
        <el-tag :type="type === 7 ? 'success' : 'info'" @click="selectStep(7)"
          >已验收</el-tag
        >
      </div>
      <div class="emp-info">今日已完成</div>
      <input class="finish-input" type="textarea" v-model="todayFinish" />
      <div class="emp-info">今日未完成</div>
      <input class="finish-input" type="textarea" v-model="todayIncomplete" />
      <div class="emp-info">明日计划</div>
      <input class="finish-input" type="textarea" v-model="tomorrowPlan" />
      <div class="emp-info">寻求支持</div>
      <input class="finish-input" type="textarea" v-model="support" />
      <div class="sub-btn">
        <div class="remove" @click="resetting">取消</div>
        <div class="sub" @click="submitInfo">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 项目阶段
      type: 1,
      // 员工信息
      empInfo: "",
      // 项目列表
      options: [
        {
          value: "选项1",
          label: "项目1",
        },
        {
          value: "选项2",
          label: "项目2",
        },
        {
          value: "选项3",
          label: "项目3",
        },
        {
          value: "选项4",
          label: "项目4",
        },
        {
          value: "选项5",
          label: "项目5",
        },
      ],
      // 选中的项目
      projectName: "",
      // 今日已完成
      todayFinish: "",
      // 今日未完成
      todayIncomplete: "",
      // 明日计划
      tomorrowPlan: "",
      // 寻求支持
      support: "",
    };
  },

  methods: {
    selectStep(num) {
      this.type = num;
    },

    // 提交表单
    submitInfo() {},

    // 重置
    resetting() {
      this.type = 1;
      this.empInfo = "";
      this.projectName = "";
      this.todayFinish = "";
      this.todayIncomplete = "";
      this.tomorrowPlan = "";
      this.support = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f3f6ff;

  .info-form-box {
    border: 1px solid rgb(240, 247, 247);
    border-radius: 20px;
    width: 80%;
    height: 100%;
    background: #fff;

    .head-box {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
      /* border: 1px solid blue; */
    }

    .emp-info-title {
      /* border: 1px solid blue; */
      height: 30px;
      line-height: 30px;
      padding-left: 80px;
      margin-top: 10px;
    }

    .emp-info-input {
      height: 20px;
      margin-left: 80px;
      width: 70%;
    }
    > .emp-info-input:focus {
      outline: 1px solid rgb(29, 153, 236);
    }

    .emp-info {
      /* border: 1px solid blue; */
      margin-top: 10px;
      height: 30px;
      line-height: 30px;
      padding-left: 80px;
    }

    .el-select {
      height: 30px;
      margin-left: 80px;
      width: 70%;
    }

    .tag-box {
      /* border: 1px solid red; */
      height: 60px;
      line-height: 30px;
      padding-left: 80px;
    }

    .finish-input {
      height: 40px;
      margin-left: 80px;
      width: 70%;
    }

    .sub-btn {
      /* border: 1px solid red; */
      display: flex;
      width: 100%;
      justify-content: center;

      > div {
        /* border: 1px solid green; */
        width: 20%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 20px;
        margin: 20px;
      }

      .sub {
        background: #378ac2;
        color: #fff;
      }

      .remove {
        background: #bfc2c2;
        color: #fff;
      }
    }
  }
}

.el-tag {
  margin-right: 10px;
  width: 21%;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.el-tag:hover {
  cursor: pointer;
}
</style>